/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */
import {
  View,
  ImageBackground,
  StatusBar,
  TouchableHighlight,
  DeviceEventEmitter ,
  Image,
  Text,
  TouchableOpacity,
  Modal,
} from 'react-native';
import React, {Component} from 'react';
import {NavigationFocusChangeEventListener} from '@react-navigation/native';
import styles from './styles';
import FloatingButton from './FloatingButton';
import {register, nav} from './FunctioninButton';
import {checkToken} from '../../services/DecodeToken';
import LoginState from '../../enums/apistate'; 
import Shopselect from '../shop/Shopselect';
export default class Home extends Component<{register: () => void}, {}> {

  state = {
    LoginState: false,
    visible:false,
  };

  // Function to update login state
  updateLoginState = async () => {
    if (await checkToken()) {
      this.setState({ LoginState: true });
    } else {
      this.setState({ LoginState: false });
    }
  };

  componentDidMount() {
    // Initial login state check when the component mounts

    this.updateLoginState();
    const listener = DeviceEventEmitter.addListener('refreshlogin', (m) => {
      console.log('LoginPagerefresh');
      console.log(m);
      this.setState({ LoginState: m });
    });

  }


  render() {
    return (
      <ImageBackground
        resizeMode="stretch"
        style={styles.constiner}
        source={require('../../src/image/home_background.png')}>
          <StatusBar 
          hidden={false}
          backgroundColor="black"
          barStyle={ 'light-content'}
        />
        <Modal
          animationType="none"
          transparent={true}
          visible={this.state.visible}
          onRequestClose={() => this.setState({ visible: false })}
          style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)', flex: 1, justifyContent: 'center', alignItems: 'center', borderRadius: 20 }}
        >
          <View style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)',width: '100%', height: '100%' }}>
            {/* Modal的内容 */}
          </View>
        </Modal>
        <Shopselect
    visible={this.state.visible} 
    navigation={this.props.navigation}
    onClose={() => {  this.setState({ visible:!this.state.visible });}}
    
  />

<TouchableOpacity
          onPress={() => this.props.navigation.navigate('login')}
          style={{position: 'absolute', left: '10%', top: '3%'}}>
          <View style={{flexDirection: 'row', alignItems: 'center'}}>
    <Image
      source={require('../../src/image/UI/award_star.png')}
      style={{width: 30, height: 30}}
    />
    {this.state.LoginState ? <Text style={styles.login}>已登录</Text> : <Text style={styles.login}>未登录</Text>}
  </View>
        </TouchableOpacity>
        <View
          style={{flexDirection: 'row', justifyContent: 'center',alignContent:'center', bottom: 100}}>
          
          <FloatingButton
            text={'学习'}
            sthis={this}
            func={nav(this, 'select')}
            color={'#3cd11f'}
          />
          <FloatingButton
            text={'商城'}
            sthis={this}
            func={()=>{this.setState({ visible: true });}}
            color={'#f7c808'}
          />
          <FloatingButton
            text={'冒险'}
            sthis={this}
            func={nav(this, 'select_adventure')}
            color={'#11f3df'}
          />
        </View>
      </ImageBackground>
    );
     
  }
}
